<template>
  <div>
    <div >
      <el-button @click="open" style="margin-top:30px; margin-bottom: 30px;" type="primary">添加视频</el-button>
      <el-table :data="dirVideoList">
        <el-table-column label="视频名称" prop="Vname">

        </el-table-column>
        <el-table-column label="时长" >
              <template #default="scope">
                      <div>
                  
                          {{Math.floor(scope.row.Vtime/60)+"分"+(scope.row.Vtime%60)+"秒"}}
                      </div>
                    </template>
        </el-table-column>

          <el-table-column label="操作">
              <template #default="{row}">
                <div>
                      <el-link type="danger" @click="toDelVideo(row._id)">删除</el-link>
                </div>
              </template>
        </el-table-column>
      </el-table>
    </div>
    <el-dialog width="60%" title="添加视频" v-model="videoFlag">
         <el-table :data="tableList">
              <el-table-column label="视频名称" prop="Vname">

              </el-table-column>
              <el-table-column label="绑定课程" prop="Vstate"> </el-table-column>
                  <el-table-column label="视频时长" prop="Vtime">
                    <template #default="scope">
                      <div>
                  
                          {{Math.floor(scope.row.Vtime/60)+"分"+(scope.row.Vtime%60)+"秒"}}
                      </div>
                    </template>
                  </el-table-column>
                <el-table-column label="发布日期" prop="createAt">
                  <template #default="{row}">
                    <div>
                        {{new Date(row.createAt).toLocaleDateString()}}
                    </div>
                  </template>
                </el-table-column>
              <el-table-column label="操作">
                <template #default="{row}">
                  <div>
                      <el-button type="primary" @click="toAdd(row._id)">添加</el-button>
                  </div>
                </template>
                    
              </el-table-column>
            </el-table>
            <el-pagination background layout="prev,pager,next" :total="total" :page-size="3" @current-change="pageChange"></el-pagination>
    </el-dialog>
  </div>
</template>

<script setup>
    import {getVideoList} from '../../../api/video'
    import {addDirVideoApi,getDirVideoList,delDirVideoApi} from '../../../api/course'
    import {ref} from 'vue'
    import mitt from '../../../utils/mitt'
    import {useRoute} from 'vue-router'
    import { ElMessage } from 'element-plus'
    let route=useRoute();
    let pageStart=ref(1)
    let tableList=ref([])//视频列表
    let total=ref(0)
    let videoFlag=ref(false)
    let dirVideoList=ref([]) //目录下的视频列表
    let dirid=ref('') //目录id
    // 接收兄弟组件传来的目录_id
      mitt.on('todirid',(_id)=>{
        dirid.value=_id;
        getDirVideo();
      })
      // 获取目录下的视频列表接口
      let getDirVideo=async ()=>{
          let res=await getDirVideoList({
            CDid:route.query._id,
            _id: dirid.value
          })
          console.log(res,"目录下的视频列表")
          dirVideoList.value=res.data.list;
      }

    // 获取视频列表接口
    let getVideo=async ()=>{
        let res= await getVideoList({
            searchText:"",
            pageStart:pageStart.value
        })
        tableList.value=res.data.list;
        total.value=res.data.count;
    }
    getVideo()
    let open=()=>{
        if(dirid.value){ //目录id不能为空
             videoFlag.value=true;
        }else{
                  ElMessage({
                  type:"error",
                  message:"请选择你要添加视频的目录"
                })
            }
    }
    // 添加课件  给目录添加视频接口
    let toAdd=async (Vid)=>{
    
            let res=await addDirVideoApi({
                cid:route.query._id,//课程_id
                _id:dirid.value,//目录_id,
                Vid:Vid //视频的_id
            })
            console.log(res,"0000000000000")
            // 存储目录下的视频列表
              ElMessage({
                type:"sucecss",
                message:"添加视频成功"
              })
              videoFlag.value=false;
            dirVideoList.value=res.data.list;
         
    }
    // 分页
    let pageChange=(val)=>{
      pageStart.value=val;
      getVideo();
    }

    // 删除目录下视频接口
    let toDelVideo=async (Vid)=>{
       let res=await delDirVideoApi({
              CDid:route.query._id,//课程_id
              _id:dirid.value,//目录_id,
              Vid:Vid //视频的_id
       })
       console.log(res,"-------删除目录下的视频")
       getDirVideo();
    }

  

</script>
